import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex); //把vuex注入到所有的子组件
import * as api from "../api";
import allRoutes from "../router/allRoutes";//引入所有的路由配置
import dynamicRoutes from '@/router/dynamicRoutes' //动态路由
import recursionRoutes from '@/utils/recursionRoutes' //递归计算用户路由的方法
import router from "../router";

let userInfo = localStorage.getItem("qf-userInfo") || "{}"
export default new Vuex.Store({
  //strict:true,//只是警告一下不要在mutation以外的处理函数中修改state
  //vuex的五大核心
  state: {
    userInfo: JSON.parse(userInfo),//用户信息
    sideMenu: [],//侧边栏菜单
    breadCrumb: [],//面包屑数据
    dialogVisible: false,//控制dialog显示隐藏的值
    dialogTitle: "增加学员信息",//控制dialog的标题
    stuData: [],
    // 表格加载动画控制
    loading: true,
    //编辑的时候,dialog回显的表格数据
    currentRow: {},
    stuTotal:0,//总条目
    stuPageSize:10,//每页显示的数量
  }, //状态
  mutations: {
    //表格显示loading动画
    SHOW_LOADING(state) {
      state.loading = true;
    },
    //表格隐藏loading动画
    HIDE_LOADING(state) {
      state.loading = false;
    },
    //设置学员项目管理表格中的数据
    SET_STU_DATA(state, payload) {
      state.stuData = payload.data;//设置学员列表
      state.loading = false;//关闭加载动画
      state.stuTotal=payload.total;//设置学员分页总数
    },
    //显示diglog
    SHOW_DIALOG(state) {
      state.dialogVisible = true;
    },
    //隐藏dialog
    HIDE_DIALOG(state) {
      state.dialogVisible = false
    },
    //修改dialog标题
    CHANGE_DIALOG_TITLE(state, payload) {
      state.dialogTitle = payload;
    },
    //保存用户信息
    SET_USER_INFO(state, payload) {//设置用户信息
      state.userInfo = payload;
    },
    SET_MENULIST(state, payload) { //设置菜单
      state.sideMenu = payload;
      // console.log(state.sideMenu)
      //将用户路由动态的添加到router的配置routes中
      //将用户路由添加到dynamicRoutes中的"/"路径那个配置中的children属性中
      let target = dynamicRoutes.find(item => item.path === "/");
      // console.log(target)
      target.children = payload;
      //要将用户路由动态的添加到我们的项目之中
      // console.log(dynamicRoutes)
      router.addRoutes(dynamicRoutes)
      //核心方法就是router.addRoutes([])
  
    },
    SET_BREADCRUMB(state, payload) {//设置面包屑🍞;
      state.breadCrumb = payload;
    },
    //修改dialog回显数据
    SET_CURRENT_ROW(state, payload) {
      state.currentRow = { ...payload }
    }

  }, //修改状态的方法
  getters: {

  },
  actions: {
    //获取用户菜单
    async GET_MENULIST({ commit }) {
      console.log('action执行了')
      //用于获取服务器中当前用户的菜单
      let res = await api.getMenulistApi();
      let { menuList } = res.data;
      //使用recursionRoutes方法,计算出用户的路由,提交给mutation
      let userRoutes = recursionRoutes(menuList, allRoutes)
      commit("SET_MENULIST", userRoutes)
    },
    //获取学员列表
    GET_STULIST({ commit }, payload = {}) {
      commit("SHOW_LOADING")//打开加载动画
      let { page = 1, count = 10, classes = "" } = payload;//解构传递的参数
      api.getStuListApi(page, count, classes)
        .then(res => {
          commit("SET_STU_DATA", res.data)
        })
    }
  },
  modules: {}, //模块化
});
